<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>${detail.title}</title>
   <style>
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: PingFang SC;
         font-size: 0.24rem;
         -webkit-overflow-scrolling: touch;
      }

      #app {
         width: 100%;
         background: rgba(248, 248, 248, 1);
      }
        input {outline:none;}
       input:-webkit-autofill,select:-webkit-autofill {  
    -webkit-box-shadow: 0 0 0px 1000px white  inset !important;  
}
      /* @font-face{
      font-family: PingFang SC;
      src: url('./font/FZ.TTF'),
           url('./font/IMPACT.TTF');
    } */
      body {
         width: 100vw;
         min-height: 100vh;
         background: rgba(248, 248, 248, 1);
         -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      }

      img {
         vertical-align: middle;
      }

      li {
         list-style: none;
      }

      .no {
         display: none;
      }

      ::-webkit-scrollbar {
         display: none;
         /* Chrome Safari */
      }

      input {
         background: none;
         outline: none;
         border: none;
      }

      [v-cloak] {
         display: none;
      }
   </style>
   <!-- <link rel="stylesheet" href="https://static.77du.net/template/ciff/news/css/style.css?v=66" /> -->
   <link rel="stylesheet" href="./css/style.css">
   <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
</head>

<body>
   <div id="app" style="display: none;" :class="really==true?'fixedBug':''">
      <header class="article">
         <!-- 顶部主图 -->
         <#if (detail.mainImage)?? && detail.mainImage?exists>
            <img src="${detail.mainImage.fileUrl}" alt="" />
         </#if>

         <section class="article-center">
            <!-- 标题 -->
            <p>${detail.title}</p>
            <!-- 新闻类别类别 -->
            <p>
               <img :src="static+'/img/wenzhang.png'" alt="文章" />
               <span>文章·${detail.category.name}</span>
            </p>
            <!-- 文章顶线 -->
            <span class="topbr"></span>

            <!-- //富文本内容区域 -->
            <article class="contain_article">
               <!--
          <div class="title">
            <span>优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是</span>
          </div>
          <div class="first_img">
            <img src="https://cn.vuejs.org/images/logo.png" alt="">
          </div>
          <div class="center_text">
            <span>
              优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀。
            </span>
          </div>
          <div class="sencond_img">
            <img src="https://cn.vuejs.org/images/logo.png" alt="">
          </div>
          <div class="bottom_text">
              <span>
                优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是
              </span>
          </div>
        -->
               ${detail.body}
            </article>

            <!-- 文章底线 -->
            <div class="endbr">
               <span></span>
               <div>END</div>
               <span></span>
            </div>
         </section>

         <!-- 文章评论预览 -->
         <div class="article-re" @click="openList">
            <div class="discuss">
               <div v-for="(item, index) in previewList" :key="index">
                  <span>{{ item.userName }}:</span>
                  <span>{{ item.intro }}</span>
               </div>
               <input @click.stop="openReallyInput" type="text" value='说点什么...' readonly="readonly" class="bottom_zhanshi" />
            </div>
         </div>
      </header>
      <!-- 底部推荐列表 -->
      <footer class="recommend">
         <p v-if="list.length>0" style="font-weight: 600;">相关文章推荐</p>
         <ul>
            <li v-for="(item, index) in list" :key="index" @click="jump(item)">
               <img :src="item.covers[0].fileUrl || ''" alt="" class="lgimg" />
               <div>
                  <p>{{item.title}}</p>
                  <p class="bottom_icon">
                     <img :src='item.category&&item.category.icon'
                        style="width:0.3rem;margin-right:0.08rem;vertical-align: bottom;" />
                     <span>{{item.category&&item.category.name}}</span>
                  </p>
               </div>
            </li>
         </ul>

         <div style="height: 1.4rem;"></div>
      </footer>
      <!-- 底部输入框 -->
      <div class="evaluate">
         <div>
            <input type="text" placeholder="说点什么吧。。。" readonly="readonly" @click="clearState" v-focus />
         </div>
         <div>
            <img :src="like[likeIndex]" alt="" @click='likeArtice' />
            <span>{{allData&&allData.favorite&&allData.favorite.favoriteNumber || 0}}</span>
         </div>
         <div>
            <img :src="static+'/img/pinglunk.png'" alt="" @click="listSwitch=true" />
            <span>{{allData.commentNum}}</span>
         </div>
      </div>

      <!-- 评论展开列表 -->
      <section :class="listSwitch===true?'writer_list showcontant':'writer_list'" @click="listSwitch=false"
         @touchmove.self.prevent>
         <div :class="listSwitch===true?'list_contain showcomlist':'list_contain'" @click.stop>
            <p class="list_title">
               <span>评论</span>
               <span>{{discussList.length}}</span>
            </p>
            <div style="height: 1rem;background-color: #fff;"></div>
            <!-- 列表主体 -->
            <div class="list_contain_box" id="list" @scroll.passive='onScroll'>
               <div class="listData" v-for="(item, index) in discussList" :key="index">
                  <img :src="item.avatar" class="header" />

                  <div class="right_con border_f">
                     <!-- 时间和人 -->
                     <div class="person">
                        <div class="person_title">
                          <input type="text" class="person_title_f" :value='item.userName' readonly='readonly'  @click.stop="replayPersonSecond(item)" v-focus>
                         <!--  <img :src="static+'/img/aixin_k.png'" class="dianzan" /> -->
                        </div>
                        <div class="dz">
                           <input type="text" class="person_title_l":value='item.addTimes' readonly='readonly'  @click.stop="replayPersonSecond(item)" v-focus >
                           <span>{{ item.praise }}</text>
                        </div>
                     </div>
                     <!-- 评论列表 -->
                     <div class="list_cen">
                        <!-- 第一层回复 -->
                        <div class="list_cen_fir" @click.stop="replayPersonSecond(item)" v-focus>
                           <span class="list_cen_fir_text">
                              <span>{{item.intro}}</span>
                              <input type="text" readonly='readonly'>
                           </span>
                           <img :src="item.images[0].fileUrl" class="list_cen_fir_img"
                              v-if="item.images && item.images[0] && item.images[0].fileUrl" />
   <div class="hasReplay" @click.self.stop="jumpReplayPage(item)" v-if="item.replyCount != 0">共{{item.replyCount}}条回复></div>
                        </div>

                        <!-- //还有回复 -->
                        <div class="list_cen_sec" v-if="item.replys && item.replys.length != 0"
                           v-for="(second, index) in item" :key="index" @click.stop.self="replayPerson(second)" v-focus>
                           <img :src=" second.avatar" mode="" class="list_cen_sec_header" />
                           <div class="list_cen_sec_right">
                              <span class="list_cen_sec_right_text">{{second.userName }}</span>
                              <div class="list_cen_sec_right_bo">
                                 <div class="list_cen_sec_right_box">
                                    <span class="list_cen_sec_right_bo_text">{{second.intro}}</span>
                                    <span>{{ sencod.addTime }}</span>
                                 </div>
                                 <img :src="static+'/img/aixin_k.png'" class="dianzan" />
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- 底部数据为空提示 -->
               <div class="floor" v-if='!hasChart'>
                  <div></div>
                  <span>没有更多了</span>
                  <div></div>
               </div>

               <div style="height: 1rem;width: 100%;background-color: #fff;"></div>
            </div>
            <div class="bottom_inp" @click.stop='closeModel' :class="start == true ? 'inputmask' : ''">
               <div @click.stop>
                  <img :src="static+'/img/pic.png'" v-show="start" />
                  <input type="text" :placeholder="hold || '说点什么'" @focus="startinput" @blur="start = false"
                     :style="start == true ? 'width:4.9rem' : 'width:5.64rem'" v-model="text" />
                  <span @click="submite" class="sendmsg">发送</span>
               </div>
            </div>
         </div>
      </section>
      <img :src="'https://static.77du.net/template/ciff/img/hartgif.gif?id='+Math.random()" alt="" v-if="showLIkeGif"
         class="showLikeGift">
      <div class="Toast" v-show='toast'>{{toasttitle}}</div>

      <!-- 真正的输入框 -->
      <transition name="fade">
         <div class="really-in" :style=[{bottom:really==true?'0':'-9999999px'}] @touchmove.prevent @click.stop="really=false;start=false">
            <div @click.stop :style=[{bottom:really==true?'0px':'-9999999px'}]>
               <input v-model="text" type="text" :placeholder="replay===''?'说点什么?':replay" ref="reallyInput"
                  id="reallyInput" @focus='recordHieght' @blur='recoverHieght' />
               <span @click="submite" class="sendmsg" style="line-height:0.65rem">发送</span>
            </div>
         </div>
      </transition>
   </div>
</body>
<script>
   (function () {
      let doc = document.documentElement,
         resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize";
      function changeFontSize() {
         let clientWidth = doc.offsetWidth,
            scale = clientWidth / 750;
         doc.style.fontSize = scale * 100 + "px";
      }
      if (!doc.addEventListener) return;
      window.addEventListener(resizeEvt, changeFontSize); // 监听窗口变化或横屏时
      document.addEventListener("DOMContentLoaded", changeFontSize);
   })();
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://static.77du.net/template/ciff/news/js/jq.js"></script>
<!-- <script src="https://static.77du.net/template/ciff/news/js/article.js?v=16"></script> -->
<script src="./js/article.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

</html>